<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>唯爱薇o朝圣之路 VUE双向数据绑定</title>
    <!-- <script src="https://unpkg.com/vue@next" ></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    //创建局部组件ReaderContainer
    const ReaderContainer = {
        props: [
            'handleBook'
        ],
        data() {
            return {
                Readers:["liumin","liuchen"]
            }
        },
        methods:{
            reading(){
                alert("我正在阅读...")
                console.log("我正在阅读..." + this.handleBook())
            }
        },
        template: `
                    <div v-for="(reader,index) in Readers">目前的读者：{{ reader }}</div>
                    <hr />
                    <div @click="this.reading()"> 目前在“唯爱薇o朝圣之路”</div>
                    `

    }

    const app=Vue.createApp({ 
                                data(){
                                        return{
                                            name: ' 唯爱薇o朝圣之路 | 我可以改变 | 我是动态值 | 0002 ',
                                            checked: false,
                                            relatives: ["liumin","liuchen","liuxiaozhen","liulihua","liuxiaonian","liujianhua","liudongliang"],
                                            selected:[],
                                            select:'liuchen',
                                            books:["《活着是一生的坚持》","《输赢》","《天幕红尘》"]

                                        }
                                },
                                methods:{
                                    handleBook() {

                                        return this.books[1]

                                    }
                                },
                                //注册局部组件方式一[简写]
                                //components:{
                                //    ReaderContainer,
                                //},
                                //注册局部组件方式二[完整]
                                components:{
                                    reader: ReaderContainer,
                                },                                                             
                                //引用全局组件<box01>和注册过来的局部组件
                                //静态参数这里还有一个小坑需要说明一下，就是静态传递的只能是字符串类型String，而动态传参的就可以是多种类型了，甚至是一个函数(方法).
                                template:`
                                    <box01 staticValue="我是静态值" sex="男" :dynamicValue="name"/>
                                    <hr />

                                    <!-- 局部组件调用方式一[简写] -->
                                    <!-- <ReaderContainer /> -->
                                    <!-- 局部组件调用方式二[完整] -->
                                    <reader :handleBook="handleBook"/>

                                    ` 
    })

    //定义全局组件
    app.component("box01",{
        //style="color:orange"为行内样式写法
        //如果有多个值都需要限定数据类型则需要如下格式才能通过，否则报错
        props: {
            staticValue: {
                type: String,
                default: 'male'
            },
            //错语示范2
            sex: {
                type: String,
                required: true

            },
            //错语示范1
            dynamicValue: {
                type: String,
                //type: Boolean,
                //通过validator精准校验传递的数据，可实现复杂逻辑的判断
                validator:function(value) {
                    console.log(value.search("唯爱薇"))
                    return value.search("唯爱薇") != -1
                }
            }
        },
        template:`
            <div>
                <div class="red"> box01: 我是子组件盒子1 </div>
                <p> {{ staticValue }}</p>
                <p> {{ sex }}</p>
                <p> {{ dynamicValue }}</p>
                <div style="color:orange"> box01: 我是子组件盒子1 End </div>
            </div>
        `
    })

    const vm=app.mount("#app")

</script>

</html>